import { PropType } from 'vue';

export const MciLabel = defineComponent({
  name: 'MciLabel',
  props: {
    label: {
      type: String,
      default: ''
    },
    subLabel: {
      type: String,
      default: ''
    },
    type: {
      type: String as PropType<'rectangle' | 'diamond'>,
      default: 'diamond'
    }
  },
  render() {
    return (
      <div class="icon-label flex items-center">
        {this.type === 'diamond' ? (
          <i
            class="icon inline-block w-8 h-8 bg-green-6"
            style="box-shadow: 0px 4px 4px rgba(0, 172, 151, 0.4); transform: rotate(-45deg)"></i>
        ) : (
          <i class="icon inline-block w-4 h-20 bg-green-6"></i>
        )}
        <span class="ml-8">{this.$slots.default?.() ?? this.label}</span>
        <span class="ml-8 text-label-14">{this.subLabel}</span>
      </div>
    );
  }
});
